import React, {Key, useEffect, useState} from "react";
import SystemInfoApi, {UsbInfo} from "@/api/web/SystemInfoApi.ts";
import {Modal, Tree} from "antd";
import type { TreeDataNode} from 'antd';

const usbInfoToTreeNode = (item: UsbInfo, index: string | number): TreeDataNode => ({
    title: item.name,
    key: index,
    children: item.connectedDevices.map((item, _index) => {
        return usbInfoToTreeNode(item, index + "-" + _index)
    }),
})

const getUsbInfoByIndex = (index: string, usbInfoList: UsbInfo[]): UsbInfo | null => {
    if (index == null && index == '') return null
    const idxList = index.split('-')

    const find = (idxList: number[], idx: number, list: UsbInfo[]) => {
        const current = list[idxList[idx]];
        if (idxList.length - 1 == idx) {
            return current
        }
        return find(idxList, idx + 1, current.connectedDevices)
    }

    try {
        return find(idxList.map(item => Number.parseInt(item)), 0, usbInfoList)
    } catch (_) {
        return null
    }
}

import {createStyles} from "antd-style"

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            div {
                background-color: transparent !important;
            }
        `,
        infoContainer: css`
            width: auto !important;
            text-wrap: nowrap;
            p {
                display: flex;
                gap: 18px;
                span {
                    margin-left: auto;
                }
            }
        `
    }
})

const USBTreeCard: React.FC = () => {
    const [usbInfoList, setUsbInfoList] = useState<UsbInfo[]>([])
    const styles = useStyles().styles
    const [selectedKey, setSelectedKey] = useState<string>('')
    const [expandKeys, setExpandKeys] = useState<Key[]>([])

    useEffect(() => {
        SystemInfoApi.getUsbTree().then(res => {
            setUsbInfoList(res.data)
        })
    }, []);

    return (
        <div className={styles.container}>
            <h3 style={{
                fontSize: 17,
                fontWeight: 600,
                textAlign: "center",
                margin: "8px auto",
            }}>USB信息</h3>
            <Tree
                treeData={usbInfoList.map((item, index) => {
                    return usbInfoToTreeNode(item, index)
                })}
                expandedKeys={expandKeys}
                onExpand={(keys) => {
                    setExpandKeys(keys)
                }}
                onSelect={(keys) => {
                    let selectedUsbInfo
                    if (keys[0] == null) {
                        selectedUsbInfo = getUsbInfoByIndex(selectedKey, usbInfoList);
                    } else {
                        const key = keys[0].toString();
                        selectedUsbInfo = getUsbInfoByIndex(key, usbInfoList);
                        setSelectedKey(key)
                    }
                    if (selectedUsbInfo != null) {
                        setExpandKeys(pre => [...pre, ...keys])
                        window.notificationApi.info({
                            key:"usbInfo",
                            placement: "topLeft",
                            message: selectedUsbInfo.name,
                            className: styles.infoContainer,
                            showProgress: true,
                            description: <>
                                <p>名称<span>{selectedUsbInfo.name}</span></p>
                                <p>产品ID<span>{selectedUsbInfo.productId}</span></p>
                                <p>设备ID<span>{selectedUsbInfo.uniqueDeviceId}</span></p>
                                <p>设备序列号<span>{selectedUsbInfo.serialNumber}</span></p>
                                <p>生产厂商<span>{selectedUsbInfo.vendor}</span></p>
                                <p>厂商ID<span>{selectedUsbInfo.vendorId}</span></p>
                            </>
                        })
                    }
                }}
            />
        </div>
    )
}

export default USBTreeCard
